<template>
	<view class="page">
		<c-nav-bar :title="titleHeader"></c-nav-bar>
		<view class="contain">
			<!-- 	<view class="swipper" :style="{ 'padding-top': mt + 'px' }">
				<image style="width: 100%;height: 420rpx;"
					:src="topBgImg" mode="aspectFit">
				</image>
			</view> -->
			<swiper class="swiper" :style="{ 'padding-top': mt + 'px' }" :circular="true" :autoplay="true"
				:interval="5000" :duration="200" style="height: 420rpx;">
				<swiper-item class="swiper-items" v-for="item, index in topBgImg" :key="index"
					@tap="toLbDetails(item.route)">
					<image class="image" style="width: 100%; height: 100%;" :src="item.path" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
			<view class="main">
				<view class="card">
					<view class="card_title">
						游玩天数
					</view>
					<view class="btnItem">
						<span @click="chooseTags1(i, index)" :class="[daysIndex == index ? 'item_selected' : 'item']"
							v-for="(i, index) in days" :key="index">{{ i }}</span>
					</view>
				</view>
				<view class="card">
					<view class="card_title">
						游玩岛屿<span>（可多选）</span>
					</view>
					<view class="btnItem">
						<span @click="chooseTags2(tag, index)" :class="[tag.selected ? 'item_selected' : 'item']"
							v-for="(tag, index) in island" :key="tag.name">{{ tag.name }}</span>
					</view>
				</view>
				<view class="card">
					<view class="card_title">
						热门景点<span>行程中将包含所选景点～（可多选）</span>
					</view>
					<view class="btnItem">
						<!-- <span @click="chooseTags3(tag, index)" :class="[tag.selected ? 'item_selected' : 'item']"
							v-for="(tag, index) in expect" :key="tag.spotId">{{ tag.name }}</span> -->
						<span @click="chooseTags3(tag, index)" :class="[tag.selected ? 'item_selected' : 'item']"
							v-for="(tag, index) in expect" :key="tag.spotId">
							{{ (tag.name).replace(/(.{7})/g, '$1\n') }}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @click="goToRecomand()">
				智能推荐
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader: '旅游定制',
				days: [
					'2天1晚',
					'3天2晚',
					'4天3晚'
				],
				selectday: '',
				island: [{
						name: '泗礁岛',
						id: '4545454544,5554544444',
						selected: false
					},
					{
						name: '嵊山岛',
						id: '1346784662,1721484186251956225',
						selected: false
					},
					{
						name: '洋山岛',
						id: '1730426782508650497',
						selected: false
					},
					{
						name: '黄龙岛',
						id: '5645645645',
						selected: false
					},
					{
						name: '枸杞岛',
						id: '1346784662,1721484186251956225',
						selected: false
					},
					{
						name: '花鸟岛',
						id: '4164678933',
						selected: false
					}
				],
				selectedTags: [],
				selectedTagIds: [],
				selectedTags2: [],
				expect: [],
				expectTags: [],
				expectIndex: 0,
				// islandIndex: 0,
				daysIndex: 0,
				topBgImg: 'https://i.ringzle.com/file/20240129/d7558faab71c4f28b9708adcc1f26580.png'
			}
		},
		onLoad() {
			this.getLbList()
		},
		methods: {
			toLbDetails(url) {
				if (!url) return
				uni.navigateTo({ url })
			},
			getLbList() {
				this.$api.get('/sys/isappletpic/queryBannerByType/3').then(res => {
					if (res.data.code === 0) {
						let list = res.data.data.bannerList.map(b=>{
							return {path:b.path,route:b.linkUri}
						})
						if (list.length > 0) this.topBgImg = list;
					}
				})
			},
			getTagList() {
				this.$api.get('/api/scenic/selectScenicList').then(res => {
					if (res.data.code == 0) {
						this.island = res.data.data
						res.data.data.forEach((i, index) => {
							if (i.type == 1) {
								// this.island = i.tagsList
								this.island.forEach(i => {
									i.islandIndex = false
								})
							}

						})
					}
				})
			},
			queryTagsGroupType() {
				this.$api.post('/api/customrec/queryTagsGroupType').then(res => {
					if (res.data.code === 0) {
						res.data.data.forEach((i, index) => {
							if (i.type == 1) {
								this.expect = i.tagsList
								this.expect.forEach((i, idx) => {
									i.checked = false;
									// i.name = i.name.replace(/(.{7})/g, '$1\n')
									this.$set(this.expect[idx], 'selected', false);
								})
							}

						})
					} else this.$showModal(res.data.msg)
				})
			},
			chooseTags1(e, i) {
				this.daysIndex = i;
				this.selectday = e;
			},
			chooseTags2(tag, index) {
				let temp = this.island.filter(d => d.selected == true);
				if (!this.island[index].selected) {
					if (temp.length > this.daysIndex + 1) return this.$showToast('每天最多可以选择一个岛');
					else this.$set(this.island[index], 'selected', true);
				} else this.$set(this.island[index], 'selected', false);

				let ids = [];
				let temp2 = this.island.filter(d => d.selected == true);
				temp2.forEach(t => {
					ids.push(t.id);
				})
				this.selectedTagIds = ids;

				this.$api.post('/api/customrec/selectSpotByIsland', {
					islandIdList: this.selectedTagIds
				}).then(res => {
					if (res.data.code == 0) {
						this.expect = res.data.data;

						console.log('this.expect', this.expect);
					} else this.$showModal(res.data.msg);
				})
			},
			chooseTags3(tag, index) {
				this.$set(this.expect[index], 'selected', !this.expect[index].selected);
				let temp = this.expect.filter(d => d.selected == true);

				let ids = [];
				temp.forEach(t => {
					ids.push(t.id);
				})
				this.expectTags = ids;
			},

			chooseTags(type, index) {
				switch (type) {
					case 1:
						this.daysIndex = index
						break
					case 2:
						// this.islandIndex = index
						if (this.island[index].islandIndex) {
							this.$set(this.island[index], 'islandIndex', false)
							this.$forceUpdate()
						} else {
							this.$set(this.island[index], 'islandIndex', true)
							this.$forceUpdate()
						}
						console.log(this.island, '--+-+-++---+-')
						break
					case 3:
						if (this.expect[index].checked) {
							this.$set(this.expect[index], 'checked', false)
							this.$forceUpdate()
						} else {
							this.$set(this.expect[index], 'checked', true)
							this.$forceUpdate()
						}
						break
				}
			},
			goToRecomand() {
				if (this.selectedTagIds.length == 0) return this.$showToast('请选择岛屿');
				uni.navigateTo({
					url: '/pagesTrip/custom-travel/routeDetail?item=' + JSON.stringify({
						dayNum: this.daysIndex + 2,
						spotList: this.expectTags,
						islandIdList: this.selectedTagIds
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.contain {
			padding-bottom: 10%;
		}

		.main {
			border-top-left-radius: 28rpx;
			border-top-right-radius: 28rpx;
			background: #fff;
			padding: 30rpx 20rpx;
			transform: translate(0, -14px);

			.card {
				margin-bottom: 20rpx;

				&_title {
					padding: 20rpx;
					font-size: 36rpx;
					font-weight: 700;
					display: flex;
					align-items: center;

					span {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #999999;
						line-height: 26rpx;
						margin-left: 6rpx;
					}
				}

				.btnItem {
					display: grid;
					grid-template-columns: auto auto auto;
					grid-gap: 23rpx;

					// max-height: 260rpx;
					// overflow-y: auto;

					.item {
						padding: 17rpx 0;
						background: #F0F7F6;
						border-radius: 16rpx;
						font-size: 27rpx;
						white-space: pre-line;
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;
					}

					.item_selected {
						text-align: center;
						padding: 17rpx 0;
						color: #fff;
						font-size: 27rpx;
						background: #007A69;
						border-radius: 18rpx;
						white-space: pre-line;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}

		.bottom {
			background: #fff;
			height: 9%;
			position: fixed;
			bottom: 0;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 100%;
			color: white;

			.btn {
				background: #007A69;
				border-radius: 49rpx;
				width: 702rpx;
				font-size: 29rpx;
				text-align: center;
				padding: 26rpx 0;

			}
		}
	}
</style>